<template>
  <div class="module-container">
    <h2>创建客户信息</h2>
    <div class="module-content">
      <form @submit.prevent="handleCreateCustomer">
        <div class="form-row">
          <div class="form-group">
            <label>姓名:</label>
            <input type="text" v-model="newCustomer.name" required />
          </div>
          <div class="form-group">
            <label>类型:</label>
            <select v-model="newCustomer.type" required>
              <option value="个人">个人</option>
              <option value="企业">企业</option>
            </select>
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-group">
            <label>社区:</label>
            <input type="text" v-model="newCustomer.community" required />
          </div>
          <div class="form-group">
            <label>经理:</label>
            <input type="text" v-model="newCustomer.manager" />
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-group">
            <label>专员:</label>
            <input type="text" v-model="newCustomer.specialist" required />
          </div>
          <div class="form-group">
            <label>社区经理:</label>
            <input type="text" v-model="newCustomer.communityManager" required />
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-group">
            <label>行业ID:</label>
            <input type="number" v-model.number="newCustomer.industryId" required />
          </div>
        </div>
        
        <div class="form-actions">
          <button type="submit" class="submit-button">创建客户</button>
          <button type="button" class="cancel-button" @click="goBack">返回</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { createCustomerInfo } from '@/apis/customer'

export default {
  name: 'CreateCustomer',
  setup() {
    const router = useRouter()
    const newCustomer = ref({
      name: '',
      type: '个人',
      community: '',
      manager: '',
      specialist: '',
      communityManager: '',
      industryId: 1
    })

    const handleCreateCustomer = async () => {
      try {
        const res = await createCustomerInfo(newCustomer.value)
        if (res && res.code === 0) {
          // 创建成功，返回客户列表页面
          router.push('/customer/info')
          console.log('客户创建成功')
        } else {
          console.error('创建客户失败:', res.msg)
        }
      } catch (error) {
        console.error('创建客户时出错:', error)
      }
    }

    const goBack = () => {
      router.go(-1)
    }

    return {
      newCustomer,
      handleCreateCustomer,
      goBack
    }
  }
}
</script>

<style scoped>
@import '../../assets/global-module-styles.css';

.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.form-group {
  flex: 1;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
}

.submit-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-button:hover {
  background-color: #0069d9;
}

.cancel-button {
  padding: 10px 20px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-button:hover {
  background-color: #5a6268;
}
</style>